<template>
  <div class="share">
    <ul v-if='isShow'>
      <li v-for="(item,index) in dataList" :key="index" :class="{active:index==active}" @click="gochange(index)">{{item.name}}</li>
      <li class="last" @click="go_next">下一步</li>
    </ul>
    <div class="conty">
      <div class="contl">
        <div class="contitem">
          <div class="item" v-for="(item,index) in recordList" :key="index">
            <div>
              <img v-if="item.user.avatar" :src="item.user.avatar" alt="">
              <i v-else class="iconfont">&#xe704;</i>
            </div>
            <div>
              <p>{{item.user.name}}<span>{{item.created_at}}</span></p>
              <h6>{{item.content}}</h6>
            </div>
          </div>
        </div>
        <div class="foot">
          <div>
            <input type="text" v-model="value" @keyup.enter='go_send'>
            <p @click="go_send">发送</p>
          </div>
        </div>
      </div>
      <div class="contr">
        <div class="headx">
          <el-upload
            class="upload-demo"
            drag
            action="https://chuangxu.oss-cn-shanghai.aliyuncs.com"
            :before-upload='go_file'
            :show-file-list="false"
            :on-success='go_success'
            :on-error="go_error"
            :data='dataLists'
            multiple>
            <div class="el-upload__text"><i class="el-icon-upload"></i>将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </div>
        <div class="gif">
          <i class="el-icon-loading" v-show="wait"></i>
        </div>
        <div v-for="(item,index) in fileList" :key="index" class="fileitem">
          <i class="iconfont">&#xe73d;</i>
          <p>{{item.title}}</p>
          <div>
            <a :href="item.url"><i class="iconfont">&#xe736;</i></a>
            <i class="iconfont" @click="go_delete(index)">&#xe733;</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/vuex/store.js'
import { Notification } from 'element-ui'
export default {
  data() {
    return {
      // dataList: [],//工种 有几个员工
      active: -1,//到哪一个员工
      message: [],//留言板块
      next: false,//是完成还是进入下一步
      dataLists:{},//上传文件到阿里云的参数
      value:'',
      userid:'',//选中的人的id
      id:'',//我的id
      recordList:[],//聊天记录
      fileList:[],//文件列表
      wait:false,//等待
      isShow:false
    };
  },
  mounted() {
    if(sessionStorage.getItem('teamleave')>0){
      this.isShow = true
    }
  },
  store,
  computed: {
    dataList(){
      if(this.isShow){
        setTimeout(() => {
          if(store.state.node.length>0){
            this.gochange(0)
          }
        }, 500);
        if(store.state.node.length>0){
          if(store.state.node[sessionStorage.getItem('processhead')].status == 2){
            this.next = true
          }
        }
        if(store.state.nodeuser.length>0){
          //这里获取id
          this.userid = store.state.nodeuser[0].id
        }
        console.log(this.userid)
        return store.state.nodeuser
      }
    }
  },
  methods: {
    //下一步
    go_next(){
      console.log(store.state.node[sessionStorage.getItem('processhead')].id)
      this.$api.Node.complete(store.state.node[sessionStorage.getItem('processhead')].id).then(res=>{
        this.$api.Node.index({project_id:store.state.pdetail.id}).then(req=>{
          console.log(req)
          store.commit('changenode', req.data.data)
          if(store.state.node.length==sessionStorage.getItem('processhead')){
            Notification({
              title:'成功',
              message:"项目完成",
              type:'success'
            })
          }
        })
      })
    },
    //删除
    go_delete(req){
      this.$api.Attachment.destroy(this.fileList[req].id).then(res=>{
        this.go_message()
        this.go_filed()
      })
    },
    //发送消息
    go_send(){
      let object_id = store.state.node[sessionStorage.getItem('processhead')].id
      this.$api.Comment.store({object_type:'node',object_id:object_id,content:this.value,at_id:this.userid}).then(res=>{
        this.go_message()
        this.value = ''
      })
    },
    //选择其中一个员工
    gochange: function(req) {
      if(store.state.node.length>0){
        let object_id = store.state.node[sessionStorage.getItem('processhead')].id
        this.active = req
        if(this.dataList[req]){
          this.userid = this.dataList[req].id
        }
        this.id = JSON.parse(sessionStorage.getItem('userinfo')).id
        this.go_message()
        this.go_filed()
      }
    },
    //渲染页面消息
    go_message(){
      let object_id = store.state.node[sessionStorage.getItem('processhead')].id
      this.$api.Comment.index({object_type:'node',object_id:object_id,user_ids:[this.userid,this.id],at_ids:[this.userid,this.id]}).then(res=>{
        this.recordList = res.data.data
      })
    },
    //渲染页面文档
    go_filed(){
      let object_id = store.state.node[sessionStorage.getItem('processhead')].id
      this.$api.Attachment.index({object_type:'node',object_id:object_id,user_id:this.id,receiver_id:this.userid}).then(res=>{
        this.fileList = res.data.data
      })
    },
    //上传文件
    go_file(resp) {
      this.wait = true
      console.log(resp)
      this.isActive = true
      let _this = this;
      return this.$api.Token.store({type:store.state.pdetail.type,object_type:'node',object_id:store.state.node[sessionStorage.getItem('processhead')].id,title:resp.name,receiver_id:this.userid}).then(function(res) {
        let token = res.data.data;
        console.log(res)
        _this.dataLists = {
            key: token.dir + get_object_name(resp.name),
            policy: token.policy,
            OSSAccessKeyId: token.access_id,
            Signature: token.signature,
            success_action_status: "200",
            callback: token.callback,
          }
        function random_string(len) {
          len = len || 32;
          var chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
          var maxPos = chars.length;
          var pwd = "";
          for (var i = 0; i < len; i++) {
            pwd += chars.charAt(Math.floor(Math.random() * maxPos));
          }
          return pwd;
        }

        function get_suffix(filename) {
          var pos = filename.lastIndexOf(".");
          var suffix = "";
          if (pos != -1) {
            suffix = filename.substring(pos);
          }
          return suffix;
        }

        function get_object_name(filename) {
          var suffix = get_suffix(filename);
          return random_string(10) + suffix;
        }
      });
    },
    // 上传成功的钩子
    go_success(res){
      this.isActive = false
      Notification({
        title:'成功',
        message:"上传成功",
        type:'success'
      })
      this.wait = false
      this.go_filed()
      // this.txtorderList.push(res.data)
    },
    // 上传失败的钩子
    go_error(){
      this.isActive = false
      Notification({
        title:'警告',
        message:"上传失败",
        type:'error'
      })
    },
  }
};
</script>

<style lang='scss' scoped>
@import '../../assets/css/iconfonta.css';
.share {
  width: 100%;
  margin-left: -40px;
  height: 100%;
  min-height: 550px;
  margin: auto;
  ul {
    padding: 0 40px;
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    li {
      padding: 4px 20px;
      font-size: 16px;
      color: #515151;
      cursor: pointer;
      &.active {
        color: #fff;
        background: #b5b5b5;
        border-radius: 5px;
      }
      &.last {
        margin-left: auto;
        width: 87px;
        height: 20px;
        background: rgba(86, 175, 247, 1);
        border-radius: 5px;
        text-align: center;
        font-size: 12px;
        color: #fff;
        line-height: 20px;
      }
    }
  }
  .conty {
    width: calc(100% - 80px);
    margin: auto;
    height: calc(100% - 48px);
    min-height: 500px;
    overflow: auto;
    display: flex;
    .contl {
      width: 50%;
      height: 100%;
      position: relative;
      .contitem {
        overflow: auto;
        width: 100%;
        height: calc(100% - 52px);
        &::-webkit-scrollbar {
          width: 10px;
          height: 1px;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background: rgba(181, 181, 181, 1);
        }
        &::-webkit-scrollbar-track {
          border-radius: 10px;
          background: transparent;
        }
      }
      .item {
        width: 100%;
        min-height: 80px;
        margin-top: 20px;
        display: flex;
        i{
          font-size: 40px;
        }
        img {
          width: 40px;
          height: 40px;
          box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.13);
          margin-left: 5px;
          display: block;
        }
        > div {
          margin-left: 10px;
          p {
            margin-top: 4px;
            font-weight: bold;
            font-size: 14px;
            color: #333;
            display: flex;
            align-items: flex-end;
            span {
              margin-left: 15px;
              font-size: 10px;
            }
          }
          h6 {
            margin-top: 10px;
            line-height: 20px;
            font-size: 12px;
            color: #515151;
          }
        }
      }
      .foot {
        position: absolute;
        width: 100%;
        height: 32px;
        bottom: 0px;
        left: 0;
        padding: 10px 0;
        > div {
          width: calc(100% - 2px);
          height: 32px;
          background: rgba(255, 255, 255, 1);
          border: 0.5px solid rgba(181, 181, 181, 1);
          border-radius: 5px;
          position: relative;
          display: flex;
          align-items: center;
          p {
            margin-left: auto;
            padding: 0px 20px;
            border-radius: 5px;
            font-size: 12px;
            color: #fff;
            height: 24px;
            line-height: 24px;
            margin-right: 2px;
            cursor: pointer;
            background: #56aff7;
          }
          input {
            width: calc(100% - 84px);
            padding-left: 6px;
            border: none;
            outline: none;
            color: #515151;
          }
        }
      }
    }
    .contr {
      width: 50%;
      padding-left: 20px;
      box-sizing: border-box;
      height: 100%;
      .fileitem{
        margin-bottom: 10px;
        color: #515151;
        width: 100%;
        display: flex;
        align-items: center;
        div{
          cursor: pointer;
          margin-left: auto;
          a{
            color: #515151;
          }
          i{
            margin-left: 10px;
          }
        }
      }
      .headx {
        margin-bottom: 30px;
        width: 100%;
        height: 32px;
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        & /deep/ .upload-demo{
          width: 100%;
          height: 32px;
          .el-upload-dragger,.el-upload{
            width: 100%;
            height: 32px;
            div{
              display: flex;
              align-items: center;
              margin: auto;
              
            }
          }
          i{
            margin: 0;
            font-size: 20px;
            line-height: 32px;
          }
        }
        > div {
          display: flex;
          align-items: center;
          img {
            width: 17px;
            height: 17px;
          }
          h5 {
            width: 70px;
            height: 24px;
            position: relative;
            z-index: 1;
            text-align: center;
            color: #56b0f8;
            line-height: 24px;
            font-size: 14px;
          }
          input {
            width: 70px;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
          }
          h6 {
            font-size: 14px;
          }
        }
      }
      .gif {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        i {
          width: 20px;
          height: 20px;
          font-size: 20px;
        }
        h6 {
          font-size: 12px;
          color: red;
        }
      }
      > p {
        font-size: 12px;
        margin-top: 20px;
        color: #515151;
      }
    }
  }
}
</style>